import React from 'react';
import moment from 'moment';
import { Tooltip } from 'antd';
import { useTablePipeline } from 'ali-react-table';
import { AntdBaseTable } from '@/base/TBaseTable';
import { TRDefault } from '@/components/index.js';
import { TIME_ENUM, ToFixed } from '../../../tool';
import { defaultPointerNum } from '../../../dictionary';
import type { IShortForecastCurveAdjustmentDataType } from '../../../type';
import styles from './index.less';

interface IProps {
  /**
   * 数据源
   */
  data?: IShortForecastCurveAdjustmentDataType[];
  /**
   * 申报时间
   */
  issueTime?: string;
}

const DeclareDetailList = (props: IProps) => {
  // const { data = [] } = props;
  const { data = [], issueTime = '' } = props;
  const _issueTime = moment(issueTime).format('YYYY.MM.DD');
  const getColumns = () => {
    const _pointerNums = TIME_ENUM(defaultPointerNum);
    const columns = [
      {
        code: 'dataSourceName',
        name: '类型',
        width: 150,
        align: 'left',
        lock: true,
        render(v: string) {
          return v || '-';
        },
      },
    ];
    _pointerNums?.forEach((item) => {
      columns.push({
        code: item,
        name: item,
        width: 100,
        // @ts-ignore
        render(v: string, record: IShortForecastCurveAdjustmentDataType) {
          const { pointList } = record || {};
          // const _value: string =
          //   pointList && Object.values(pointList) && Object.values(pointList)[0]
          //     ? // @ts-ignore
          //       Object.values(pointList)[0].find((i: any) => item === i.xAxis)?.value ?? '-'
          //     : '-';
          const _value: string | number = pointList[_issueTime]
            ? pointList[_issueTime].find((i) => item === i.xAxis)?.value ?? '-'
            : '-';
          return (
            <div className={styles.tooltip}>
              <Tooltip placement="topLeft" title={_value}>
                {_value || Number(_value) === 0 ? ToFixed(_value, 3) : '-'}
              </Tooltip>
            </div>
          );
        },
      });
    });
    return columns;
  };

  const pipeline = useTablePipeline({})
    .input({ dataSource: data, columns: getColumns() as any })
    .primaryKey('dataSourceId')
    .appendRowPropsGetter((): any => {
      const color = '#222629';
      return {
        style: { '--bgcolor': color, '--hover-bgcolor': color },
      };
    });

  return (
    <div className={styles.container}>
      {data.length ? (
        <div className={styles.antdBaseTable}>
          <AntdBaseTable
            useVirtual={{ horizontal: true, vertical: true, header: false }}
            style={{
              '--row-height': '28px',
              // '--header-bgcolor': '#383C3E',
              '--header-row-height': '28px',
              '--cell-padding': '4px 16px',
              '--cell-border-vertical': '1px solid #4E5154',
              '--header-cell-border-vertical': '1px solid #4E5154',
              '--hover-bgcolor': '#222629',
            }}
            {...pipeline.getProps()}
          />
        </div>
      ) : (
        <TRDefault type={'emptysm'} message={'暂无数据'} />
      )}
    </div>
  );
};

export default DeclareDetailList;
